<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        :root{
            --cool:#40C5F1;
            --hot:#f00;
            --grey:#423029;
            --light:#C3D0DF;
        }
        .wrap {
            width: 600px;
            margin: 50px auto;
        }

        .nav {
            display: flex;
            line-height: 40px;
            text-align: center;
        }

        .nav li {
            flex: 1;
            border: 1px solid var(--grey);
        }
        .nav .active{
            background-color: var(--cool);
            color: #fff;
        }

        .nav li+li {
            border-left: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="nav">
            <li class="active">nav_1</li>
            <li>nav_2</li>
            <li>nav_3</li>
            <li>nav_4</li>
            <li>nav_5</li>
            <li>nav_6</li>
        </ul>
    </div>
</body>
<script>
    // 点击每个li 打印li本身及其下标

    var nav = document.getElementsByClassName("nav")[0];
    var liList = nav.getElementsByTagName("li");
    console.log(liList);

    var prevIndex = 0;

    // 多元素循环绑定事件
    for (let i = 0; i < liList.length; i++) {
        let li = liList[i]; // 获取每一个
        li.onclick = function () { // 给每一个绑事件


            // this.style.backgroundColor = "var(--cool)";
            // this.style.color = "#fff";
            
            // this.style.cssText = "background:#6ff;color:#fff";

            // 每次点击 1. 先清除上一个  2. 当前元素变为活跃状态  3. 记录当前下标 -> 供下次使用

            if(prevIndex === i)  return false;  //点自己

            if(prevIndex != null){  
                liList[prevIndex].className = "";
            }   

            this.className = "active";

            prevIndex = i;  // 记录被点击元素的下标

        }
    }




</script>

</html>